<!-- 二维码解析 -->
<script setup lang="ts">
import { defineProps, ref, onMounted } from 'vue';
import QRCode from 'qrcode';

const props = defineProps({
    url: String
})

const qrCodeUrl = ref<string | null>(null);

const generateQRCode = async () => {
    try {
        const dataUrl = await QRCode.toDataURL(props.url.trim());
        qrCodeUrl.value = dataUrl;
    } catch (error) {
        console.error('Error generating QR code:', error);
    }
};

// 在组件挂载后自动调用生成二维码方法
onMounted(() => {
    generateQRCode();
});
</script>

<template>
    <div id="QRCode">
        <img style="width: 100px;height: 100px;" :src="qrCodeUrl" alt="QR Code" />
    </div>
</template>